<template>
  <view class="page flex-col" style="">
    <view class="block_2 flex-col">
      <view class="text-group_6 flex-col">
        <text class="text_4">用户信息</text>
        <text class="paragraph_1"> 为方便您使用且享受更多的服务，需填写您的真实信息。 </text>
      </view>
      <view class="group_2">
        <view class="section_4 align-center">
          <view class="section_1 flex-col"></view>
          <view class="text_5">将会获取您的真实姓名</view>
        </view>
        <view class="section_4 align-center">
          <view class="section_1 flex-col"></view>
          <view class="text_5">将会获取您的手机号</view>
        </view>
      </view>
    </view>
    <view class="block_3">
      <view class="text-wrapper_15 flex-row">
        <view class="text_9">姓名</view>
        <input class="text_8" placeholder="请填写真实姓名" v-model="name" />
      </view>
      <!-- <view class="text-wrapper_15 flex-row">
        <view class="text_9">身份证号</view>
        <input class="text_8" placeholder="请填写身份证号" v-model="card" />
      </view> -->
      <view class="text-wrapper_15 flex-row">
        <view class="text_9">手机号</view>
        <input class="text_8" placeholder="请填写手机号" type="number" v-model="phone" @input="changePhone" />
      </view>

      <view class="text-wrapper_15 align-center">
        <view class="text_9">图形验证码</view>
        <input class="text_8" placeholder="图形验证码" v-model="imgCode" style="width: 120px" />
        <image style="height: 50px; width: 150px; margin-left: 10px" :src="codeImg" mode="aspectFit" @click="restCodeImg"></image>
      </view>

      <view class="text-wrapper_15 align-center">
        <view class="text_9">短信验证码</view>
        <input class="text_8" placeholder="请填写验证码" v-model="code" style="width: 120px" />
        <view class="text_13" @click="getPhoneCode()" v-if="flag">获取短信验证码</view>
        <view class="text_13" v-else>{{ numcode }}s后重新获取</view>
      </view>

      <view class="image-text_3 flex-row justify-between align-center mt10">
        <radio @click="radiox()"></radio>
        <view class="text-group_3">
          <text class="text_18">我同意</text>
          <text class="text_20" @click="$to('./text')">实名认证协议</text>
        </view>
      </view>

      <view class="subBtn" @click="submit()"> 确定 </view>
    </view>
  </view>
</template>
<script>
import { getUser } from '../../utils/auth.js'
export default {
  data() {
    return {
      user_id: '',
      name: '',
      card: '',
      phone: '',
      code: '',
      radio: '',
      constants: {},
      sign: null,
      flag: true,
      numcode: 60,
      imgCode: '',
      codeImg: ''
    }
  },
  onLoad() {
    // 获取实名协议接口/api/index/getProtocol  @朝夕
    var uniMPModule = uni.requireNativePlugin('HGUniMPModule')
    const res = uniMPModule.getRequestHeader()
    this.sign = res
  },
  methods: {
    restCodeImg() {
      var uniMPModule = uni.requireNativePlugin('HGUniMPModule')
      const res = uniMPModule.getRequestHeader()
      this.$http({ url: 'getCaptchaCode', method: 'post', data: { phone: this.phone, sign: res } }).then(res => {
        this.codeImg = res.data
      })
    },
    getPhoneCode() {
      var uniMPModule = uni.requireNativePlugin('HGUniMPModule')
      const res = uniMPModule.getRequestHeader()
      this.sign = res
      this.$http({
        url: 'send',
        method: 'post',
        data: {
          phone: this.phone,
          sign: this.sign,
          captcha: this.imgCode
        }
      })
        .then(res => {
          this.flag = false
          let timer = setInterval(() => {
            this.numcode--
            if (this.numcode <= 0) {
              clearInterval(timer)
              this.numcode = 60
              timer = null
              this.flag = true
            }
          }, 1000)
        })
        .catch(err => {
          this.restCodeImg()
        })
    },
    submit() {
      if (!this.phone || !this.code) {
        uni.showToast({
          title: '请填写正确资料',
          icon: 'none', // 不显示图标，如果你想要显示图标可以设置为 'success'、'fail' 等
          duration: 2000 // 持续时间，单位毫秒，默认1500
        })
        return
      }
      if (!this.radio) {
        uni.showToast({
          title: '请同意协议',
          icon: 'none', // 不显示图标，如果你想要显示图标可以设置为 'success'、'fail' 等
          duration: 2000 // 持续时间，单位毫秒，默认1500
        })
        return
      }

      var that = this
      var uniMPModule = uni.requireNativePlugin('HGUniMPModule')
      const res = uniMPModule.getRequestHeader()
      this.$http({
        url: 'setRealNameStatus',
        method: 'post',
        data: {
          user_id: getUser().id,
          // card: that.card,
          phone: that.phone,
          name: that.name,
          code: that.code,
          sign: res
        }
      })
        .then(res => {
          if (res.code == 1) {
            uni.showToast({
              title: '提交成功',
              icon: 'none', // 不显示图标，如果你想要显示图标可以设置为 'success'、'fail' 等
              duration: 2000 // 持续时间，单位毫秒，默认1500
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }, 500)
          }
        })
        .catch(err => {
          this.restCodeImg()
        })
    },
    radiox() {
      this.radio = true
      console.log(this.radio)
    },
    changePhone() {
      if (this.phone.length == 11) {
        this.$http({ url: 'getCaptchaCode', method: 'post', data: { phone: this.phone, sign: this.sign } })
          .then(res => {
            console.log(res)
            this.codeImg = res.data
          })
          .catch(err => {
            this.restCodeImg()
          })
      }
    },
    yanzhengma() {}
  }
}
</script>
<style lang="scss" scoped>
@import '../common/common.css';
.page {
  background-color: rgba(250, 250, 250, 1);
  position: relative;
  width: 750rpx;
  height: 1624rpx;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 640rpx;
  padding-left: 0;
  padding-right: 0;
}

.box_3 {
  margin: 0 18rpx 0 24rpx;
}

.text-wrapper_14 {
  width: 108rpx;
  height: 32rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_24 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_25 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.thumbnail_5 {
  width: 34rpx;
  height: 22rpx;
  margin: 6rpx 0 4rpx 438rpx;
}

.thumbnail_6 {
  width: 30rpx;
  height: 22rpx;
  margin: 4rpx 0 6rpx 10rpx;
}

.image_3 {
  width: 48rpx;
  height: 22rpx;
  margin: 4rpx 0 6rpx 10rpx;
}

.text-wrapper_2 {
  background-size: 100% 100%;
  margin-top: 38rpx;
  padding: 14rpx 290rpx 14rpx 286rpx;
}

.text_3 {
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 54rpx;
}

.block_2 {
  background: url(/static/realNameAuthentication/SketchPng02212920d42ec4f09189bc4a1dec7a534ea99f2c2005df70b3ed509d10619847.png) 100% no-repeat;
  background-size: contain;

  padding: 90rpx 30rpx 20rpx 28rpx;
}

.text-group_6 {
  margin-right: 298rpx;
}

.text_4 {
  overflow-wrap: break-word;
  color: rgba(25, 30, 92, 1);
  font-size: 56rpx;
  text-align: center;
  white-space: nowrap;
  line-height: 78rpx;
  margin-right: 170rpx;
}

.paragraph_1 {
  width: 390rpx;
  height: 106rpx;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 26rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  line-height: 40rpx;
  margin: 36rpx 0 0 4rpx;
}

.group_2 {
  width: 690rpx;
  background: url(/static/realNameAuthentication/SketchPng80eac726be7b2bcda6d218e4daef0d4fe7a60d25b7586b07c404d3e9a31c0af4.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 74rpx 0 0 2rpx;
  padding: 32rpx 40rpx;
}

.section_4 {
  height: 25px;
}

.section_1 {
  background-color: rgba(0, 45, 177, 0.5);
  border-radius: 50%;
  width: 8rpx;
  height: 8rpx;
  margin-right: 10px;
}

.text_5 {
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 26rpx;
  text-align: left;
  white-space: nowrap;
}

.block_3 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: 95%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.text-wrapper_15 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}

.text_8 {
  font-size: 30rpx;
  text-align: left;
  line-height: 46rpx;
  width: 70%;
}

.text_9 {
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  text-align: left;
  line-height: 46rpx;
  width: 150rpx;
  margin-right: 10px;
}

.text_10 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(189, 189, 189, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
}

.text-wrapper_17 {
  margin-top: 82rpx;
}

.text_11 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
}

.text_12 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
  margin-left: 74rpx;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(20, 184, 252, 1);
  font-size: 30rpx;
  line-height: 46rpx;
  margin-left: 18rpx;
}

.group_3 {
  background-color: rgba(245, 245, 245, 1);
  border-radius: 18px;
  align-self: center;
  margin-top: 48rpx;
  width: 414rpx;
  padding: 24rpx 34rpx 22rpx 36rpx;
}

.image-text_3 {
  width: 284rpx;
  align-self: center;
  margin-top: 33rpx;
}

.text_18 {
  height: 26rpx;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 26rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_20 {
  height: 26rpx;
  overflow-wrap: break-word;
  color: rgba(20, 184, 252, 1);
  font-size: 26rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text-wrapper_8 {
  background-color: rgba(66, 185, 235, 1);
  padding: 10px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  color: #fff;
}

.subBtn {
  background-color: rgba(66, 185, 235, 1);
  padding: 10px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  border-radius: 20px;
  margin-top: 20px;
}

.group_4 {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 2px;
  width: 268rpx;
  height: 10rpx;
  align-self: center;
  margin-top: 40rpx;
}
</style>
